<template>
  <div class="bid-info">
    <table-ext :columns="columns" :searchForm="searchForm" :config="config" ref="tableExt">
       <template slot="table-action">
         <el-button type="danger" @click="addRule" icon="el-icon-circle-plus">新增</el-button>
       </template>
    </table-ext>


  <el-dialog title="新增" :visible.sync="editVisible" class="dialog-form" width="800px">
    <el-form :model="templateForm" :inline="true" :rules="rules"  label-width="100px" ref="templateForm">
      <el-form-item label="模板名称：" prop="templateName">
        <el-input v-model="templateForm.templateName" type="text"></el-input>
      </el-form-item>
      <el-form-item label="品类：" prop="categoryName">
        <select-tree ref="selectCategory" @input="changeTree" v-model="templateForm.categoryName"></select-tree>
      </el-form-item>
      <p>商务</p>
      <el-form-item label="权重：" prop="busWeight">
        <el-input v-model="templateForm.busWeight" type="text" style="width:50%"></el-input>
        <el-radio-group v-model="busWeight" style="width:48%" @change="templateForm.busGradeTemplateId=''">
          <el-radio label="1">附件</el-radio>
          <el-radio label="0">模板</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="" prop="busGradeTemplateId" class="mr0">
        <el-upload class="upload-file" style="width:380px;" ref="upload" :action="this.lib.config.host.system + '/common/fileupload/upload'" :data=fileData
              :limit="1" :on-success="res=>{uploadSuccess(res,'busGradeTemplateId')}" v-if="busWeight==1">
        <el-button slot="trigger" type="primary">选取文件</el-button>
        </el-upload>
        <el-select v-model="templateForm.busGradeTemplateId" placeholder="请选择" v-if="busWeight==0">
            <el-option v-for="item in gradeTemplates" :key="item.id" :label="item.templateName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <p>技术</p> 
      <el-form-item label="权重：" prop="tecWeight">
        <el-input v-model="templateForm.tecWeight" type="text" style="width:50%"></el-input>
        <el-radio-group v-model="tecWeight" style="width:48%" @change="templateForm.tecGradeTemplateId=''">
          <el-radio label="1">附件</el-radio>
          <el-radio label="0">模板</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="" prop="tecGradeTemplateId" class="mr0">
        <el-upload class="upload-file" style="width:380px;" ref="upload" :action="this.lib.config.host.system + '/common/fileupload/upload'" :data=fileData
              :limit="1" :on-success="res=>{uploadSuccess(res,'tecGradeTemplateId')}" v-if="tecWeight==1">
        <el-button slot="trigger" type="primary">选取文件</el-button>
        </el-upload>
        <el-select v-model="templateForm.tecGradeTemplateId" placeholder="请选择" v-if="tecWeight==0">
            <el-option v-for="item in gradeTemplates" :key="item.id" :label="item.templateName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="editVisible=false">取消</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </div>
  </el-dialog>

  <el-dialog title="设置品类" :visible.sync="setcategoryShow" class="dialog-form" width="500px">
    <el-form :model="templateForm" :inline="true" :rules="rules"  label-width="100px" ref="templateForm">
      <el-form-item label="品类：" prop="categoryName" style="width:100%">
        <select-tree ref="selectCategory" @input="changeTree" v-model="templateForm.categoryName"></select-tree>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="setcategoryShow=false">取消</el-button>
      <el-button type="primary" @click="changeCategory">提交</el-button>
    </div>
  </el-dialog>
  </div>
</template>
<style>
.dialog-form .el-radio+.el-radio{
  margin-left: 15px;
}
.dialog-form .el-form-item.mr0 .el-form-item__content{
  margin:0px;
  padding: 0px;
}
</style>

<script>
  import TableExt from '@/components/common/table-ext/table-ext.vue';
  import SelectTree from '@/components/common/select-ext/select-tree.vue';
  import TableIcon from '@/components/common/table-ext/table-icon';
  export default {
    // 监听品类下拉
    watch: {
      'templateForm.categoryName':function(val){
        let data = this.$refs['selectCategory'].getResultData();
        // this.templateForm.categoryId=data.map(item=>{return item.id})
        this.templateForm.categoryId=data.map(item=>{return item.id}).join(',')
        console.log(data);
      }
    },
    components:{
      'select-tree':SelectTree,
      'table-ext': TableExt
    },
    data() {
      return {
        setcategoryShow:false,
        gradeTemplates:[],
        // 定义附件的业务模块和业务动作
        fileData: {
          busAction: "BID_SET_EVA_METHOD",
          tableName: "CT_PS_BID_MAIN_EXT",
          tableId: this.$route.query.id
        },
        busWeight:'1',
        tecWeight:'1',
        templateForm:{
          templateName:'',
          categoryName:'',
          busWeight:'',
          busGradeTemplateId:'',
          tecGradeTemplateId:'',
          tecWeight:''
        },
        rules:{
          templateName:[{required: true, message: '请输入模板名称', trigger: 'blur'}],
          categoryName:[{required: true, message: '请选择品类', trigger: 'change'}],
          busWeight:[{required: true, message: '请输入商务权重', trigger: 'blur'}],
          busGradeTemplateId:[{required: true, message: '请选择商务模板', trigger: 'change'}],
          tecWeight:[{required: true, message: '请输入技术权重', trigger: 'blur'}],
          tecGradeTemplateId:[{required: true, message: '请选择技术模板', trigger: 'change'}],
        },
        editVisible:false,
        test:'',
        userOptions: [{
          value: '-1',
          label: '系统管理员'
        }],
        config:{
          title: '评分方法模板管理', //页面标题
          isPage: true, //是否分页
          isNo: false, //是否显示序号
          selection: false, //是否显示复选框
          crudMapping:{ // CRUD方法
            query:{
              url: this.lib.config.host.bidtender + '/bidmgt/addition/queryTemp',
            }
          }
        },
        formLabelWidth: '120px',
        // 查询表单配置
        searchForm:[
          //显示标签 数据字段 标签类型
          {label: '模板编号', key: 'templateCode', type: 'input'},
          {label: '模板名称', key: 'templateName', type: 'input'}
        ],
        // 表格列定义
        columns:[{
          label: '操作', align:'center',width:'200',
          render:(createElement, params)=>{ // 动态渲染，click事件示例
            let _this = this;
            let edit=params.row.publishStatus===0?createElement('el-button',
                { props: { type: 'text' },
                  on: {
                    click(){
                      _this.deleteBtn(params.row);
                    }
                  }
                },'删除'):'';
             let publish=params.row.publishStatus===0?createElement('el-button',
                { props: { type: 'text' },
                  on: {
                    click(){
                        _this.publishBtn(params.row,1);
                    }
                  }
                },'发布'):'';
             let check=params.row.publishStatus===0?createElement('el-button',
                { props: { type: 'text' },
                  on: {
                    click(){
                      _this.publishBtn(params.row,2);
                    }
                  }
                },'审核'):'';      
            return createElement('div', {},
              [   edit,publish,check,
                  createElement('el-button',
                  { props: { type: 'text' },
                    on: {
                      click(){
                        _this.setcategoryBtn(params.row);
                      }
                    }
                  },'设置品类')
                ]
              );
            }
          },
          {label: '模板编号',key: 'templateCode',align:'center'},
          {label: '模板名称',key: 'templateName',align:'left'},
          {label: '提交状态',key: 'publishStatus',align:'center',render:(createElement, params)=>{
            return createElement(TableIcon,{props:{
                flag: params.row.publishStatus,
                titles: [{status:0,title:'未提交'},{status:1,title:'已提交'}]
            }});
          }},
          {label: '发布人员',key: 'publishUserName',align:'center'},
          {label: '审核状态',key: 'checkStatus',align:'center',render:(createElement, params)=>{
            return createElement(TableIcon,{props:{
                flag: params.row.checkStatus,
                titles: [{status:0,title:'未审核'},{status:1,title:'已审核'},{status:3,title:'待审核'}]
            }});
          }},
          {label: '审核人员',key: 'checkUserName',align:'center'}
        ]
      };
    },
    mounted(){ // VUE页面渲染之后调用的方法
      this.initData();
      this.axios.post(`${this.lib.config.host.system}/system/usermgt/users/findByRoleCode/BID_MANAGER`).then((res) => {
          if(res.data){
              this.gradeTemplates = res.data;
          }
      }).catch(function (error) {
          console.log(error);
      });
    },
    methods: {
      uploadSuccess: function (response,type) {
        //附件上传成功回调
        this.templateForm[type] = response.id;
      },
      // 初始化页面数据
      initData(){

      },
      createBid(){
        this.$router.push({name:'creatBid'});
      },
      deleteBtn(){
        this.$confirm(`确认删除?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(`${this.lib.config.host.bidtender}/bidmgt/addition/deleteOrCheckTemp/${id}/${type}`).then((response)=>{
              this.$message({
                type: 'success',
                message: `删除成功!`
              });
          });
        }).catch(() => {
        });
      },
      publishBtn({id},type){
        let title=type===1?'发布':'审核';
        this.$confirm(`确认${title}?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(`${this.lib.config.host.bidtender}/bidmgt/addition/publishOrCheckTemp/${id}/${type}`).then((response)=>{
              this.$message({
                type: 'success',
                message: `${title}成功!`
              });
          });
        }).catch(() => {
        });
      },
      addRule(){
        this.busWeight='1';
        this.tecWeight='1';
        this.editVisible=true;
        this.$nextTick(()=>{
          this.resetForm('templateForm')
        })
      },
      changeTree(val){
        console.log(val);
      },
      submitForm(){
        this.$refs.templateForm.validate((valid)=>{
          if(valid){
            this.axios.post(this.lib.config.host.bidtender + "/bidmgt/addition/saveTemp",this.templateForm).then((res) => {
              // 保存后跳转到主页面
              if(res.data.success){
                this.$message('添加成功！');
                this.$refs.tableExt.search();
                this.editVisible=false;
              }
            })
            .catch(function (error) {
                console.log(error);
            });
          }
        })
      },
      setcategoryBtn(row){
        !!this.$refs.templateForm?this.resetForm('templateForm'):null;
        this.setcategoryShow=true;
        this.$nextTick(()=>{
          this.templateForm={
            id:row.id,
            categoryId:'',
            categoryName:''
          }
        })
      },
      changeCategory(){
        this.$refs.templateForm.validate((valid)=>{
          if(valid){
            let data={
              id:this.templateForm.id,
              categoryId:this.templateForm.categoryId,
              categoryName:this.templateForm.categoryName
            }
            this.axios.post(this.lib.config.host.bidtender + "/bidmgt/addition/saveTemp",data).then((res) => {
              // 保存后跳转到主页面
              if(res.data.success){
                this.$message('设置成功！');
                this.$refs.tableExt.search();
                this.setcategoryShow=false;
              }
            })
            .catch(function (error) {
                console.log(error);
            });
          }
        })
      }
    }
  }

</script>
